<template>
    <div>
        <template v-if="type==='default'">
            <el-upload
                ref="file"
                :action="uploadApi"
                :on-remove="onRemoveFn"
                multiple
                :limit="5"
                :auto-upload="false"
                :on-exceed="onExceedFn"
                list-type="text">
                <el-button size="small" type="primary" slot="trigger">选取文件</el-button>
                <el-button size="small" style="margin-left:10px" type="success" @click="fileSubmit">上传到服务器</el-button>        
                <div slot="tip" class="el-upload__tip">上传文件</div>
            </el-upload>      
        </template>
        <template v-if="type==='imgDrag'">
            <el-upload
                class="upload-demo"
                drag
                :action="uploadApi"
                list-type="im"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </template>
        <template v-if="type === 'avatar'">
            <el-upload
                class="avatar-uploader"
                :action="uploadApi"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </template>
    </div>
</template>

<script>
    export default {
        naem:"UploadFile",
        data() {
            return {
                imageUrl:"",
                fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
            }
        },
        props: {
            type: {
                type: String,
                required:true,
                default: 'default'
            },
            url: {
                type: String,
                default: '/common/upload'
            }
        },
        computed: {
            uploadApi() {
                return process.env.VUE_APP_API+this.url
            }
        },
        methods: {
            onRemoveFn(e) {
                console.log(e)
            },
            onExceedFn(e) {
                console.log(e)
            },
            fileSubmit() {
                this.$refs.file.submit();
            },
            handleAvatarSuccess(res, file,fileList) {
                console.log(res,file,fileList)
                if(res.code==0){
                    this.imageUrl = res.data.url
                }
               // this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>

